<template>
  <section class="chart-container">
    <div class="c_header systemManage">
      <div class="content">
        <div class="main-content">
          <div>
            <!-- 机构首页 -->
            <div class="cont">
              <div class="btn-group">
                <span class="btn" @click="addJigouClick">增加同级机构</span>
                <span class="btn" @click="getFirstJigouList()" v-if="this.suplist.suporgid!=''">向上</span>
                <span class="text">上级机构：{{this.suplist.orgname}}</span>
              </div>
              <table width="95%">
                <thead>
                  <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>备注</th>
                    <th width="320px">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in jigouFirstList" :key="item.id">
                    <td>{{item.hash.orgid}}</td>
                    <td>{{item.hash.orgname}}</td>
                    <td>备注内容</td>
                    <td>
                      <span @click="getFirstJigouList(item.hash.orgid)">查看下级机构</span>
                      <span @click="modifyFirstJigouInfo(item.hash.orgid)">修改</span>
                      <el-button type="text" @click="deleteAreaItem(item.hash.orgid)">删除</el-button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- 增加机构 -->
            <el-dialog title="机构管理" :visible.sync="dialogTableVisible7" width="60%">
              <div class="addInfo">
                <div class="title">新增机构</div>
                <table width="95%">
                  <tbody>
                    <tr>
                      <td>上级机构:</td>
                      <td><input type="text" :value="this.suplist.orgname+'--'+this.suplist.orgid" readOnly></td>
                    </tr>
                    <tr>
                      <td>机构名称:</td>
                      <td><input type="text" v-model="newFirstJigou"></td>
                    </tr>
                    <tr>
                      <td colspan="2" v-show="showFirstJigouSubmit" @click="addJigou"><span>提交</span></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-dialog>

          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible7: false,

      showFirstJigouSubmit: false,
      sideMenu: [],
      isRouterAlive: true,

      ts: this.newStore(),
      // 分页相关
      group: 1, // 分组
      total: 0, // 数据总数
      num: 1, // 当前页
      limit: '30', // 每组有多少条数据

      // 机构管理相关
      jigouFirstList: [], //
      suplist: {},
      nowOrgname: '', // 点击查看下级代码，保存当前一级结构的名称
      nowOrgid: '',
      nowSupid: '',
      newFirstJigou: '',
      len: 0,

    };
  },
  created() {
    //this.getSidemenu();
    this.getFirstJigouList(1);
  },

  methods: {
    getSidemenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B078C37EB4CBA2359',
        token: localStorage.getItem('token'),
        supid: '200300',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sideMenu = ts.d.data.operation1;
      });
    },


    // 机构管理
    // 获取一级机构列表数据
    getFirstJigouList(supid) {
      if (!supid) {
        supid = this.suplist.orgid;
      }
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BC327730680009A98',
        token: localStorage.getItem('token'),
        suporg: supid,
      };

      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.suplist = ts.d.data.operation2[0].hash;
        this.jigouFirstList = ts.d.data.operation1;
        if (!this.jigouFirstList[0].hash.orgid) {
          this.jigouFirstList = [];
        }
      });
    },

    // 增加一级机构
    addJigou() {
      let res;
      if (this.nowOrgid) {
        res = {
          handle: '67A5B6FEF17D97DE0AB0D17168BEEBCD04453EE0A5CF10A0',
          token: localStorage.getItem('token'),
          suporgid: this.nowSupid,
          orgname: this.newFirstJigou,
          remark: '',
          orgid: this.nowOrgid,

        };
      } else {
        res = {
          handle: '67A5B6FEF17D97DE8AD68148755261CACC426B34C0BBA8ED',
          token: localStorage.getItem('token'),
          suporgid: this.suplist.orgid,
          orgname: this.newFirstJigou,
          remark: '',
        };
      }
      this.spost(this.ts, '/mainservlet', res).then(() => {
        this.getFirstJigouList();
      });
      this.dialogTableVisible7 = false;
      this.showFirstJigouSubmit = false;
    },
    // 删除一级机构
    deleteAreaItem(orgid) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '67A5B6FEF17D97DEF1D0D23DA4270B6399C94A60607326CA',
          token: localStorage.getItem('token'),
          orgid,
          suporgid: this.suplist.orgid,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.$message({
            type: 'primary',
            message: '删除成功!',
          });
          this.getFirstJigouList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 一级机构点击修改
    modifyFirstJigouInfo(orgid) {
      // 渲染单条信息
      const req = {
        handle: '67A5B6FEF17D97DE41472B87C055439393B923BD4A7449EE',
        token: localStorage.getItem('token'),
        orgid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.nowOrgid = orgid;
        this.newFirstJigou = ts.d.data.operation1[0].hash.orgname;
        this.nowSupid = ts.d.data.operation1[0].hash.suporgid;
      });

      this.showFirstJigouSubmit = true;
      this.dialogTableVisible7 = true;
    },


    // 到新增机构页
    addJigouClick() {
      this.showFirstJigouSubmit = true;
      this.newFirstJigou = '';
      this.dialogTableVisible7 = true;
    },

  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  table >>> .el-button--text
    color: #00f
    padding: 0 5px 0 0
    border-radius: 0
    border-right: 1px solid #999
  table >>> .el-message--success
    color: #00f
  // table >>> .el-button--text
  //   border-right: none;
  .show-role >>> .el-button
    padding: 5px 15px
  .show-role >>> .el-button--primary
    background: #69f
    border-color: #69f
  .systemManage
    width: 100%
    .content
      display: flex
      width: 100%
      min-height: 600px
      .sidebar
        flex: 0 0 200px
        width: 200px
        background: #F2F2F2
        border-right: 1px solid #ccc
        .main-title
          flex: 1
          width: 100%
          height: 44px
          line-height: 44px
          border-bottom: 2px solid #fff
          color: #13227A
          font-size: 0
          .iconfont
            display: inline-block
            margin-right: 15px
            font-size: 20px
            text-indent: 1em
          .text
            display: inline-block
            font-weight: 600
        .menu
          display: block
          width: 100%
          text-indent: 2em
          cursor: pointer
          background: #ffffff
          .title
            height: 48px
            line-height: 48px
            border-bottom: 1px solid #ccc
            padding-left: 10px
            &.choosed
              background #ccc
              color #333
      .main-content
        flex: 1
        min-height: 780px;
        .search_h
          height: 44px
          line-height: 44px
          padding-left: 20px
          background: #f2f2f2
          border-bottom: 2px solid #fff
          p
            float: left
            font-size: 16px
            a
              color: #69f
            span
              font-size: 14px
              padding-left: 15px
        .search_c
          width: 100%
          padding: 20px
          border-bottom: 1px solid #f1f1f1;
          .billlist
            margin-bottom: 30px
            span
              display: inline-block
              font-size: 14px
              width: 30%
              min-width: 100px
              &:first-child
                padding-left: 20px
              .selectC
                box-sizing: content-box
                width: 190px
                padding: 8px 5px
                border-radius: 2px
                box-shadow: 0 0 5px #ccc
                font-size: 14px
                color: #333
              input
                box-sizing: content-box
                width: 190px
                padding: 7px 5px
                margin-left: 5px
                border-radius: 2px
                border: 1px solid #ccc
                color: #333
          .search
            margin: 0 auto
            width: 80px
            height: 30px
            line-height: 30px
            text-align: center
            font-size: 14px
            background-color: #69f
            color: #fff
            border-radius: 5px
            font-weight: 400
            cursor: pointer
        .cont
          padding-left: 30px
          .btn-group
            margin: 10px 0
            .btn
              display: inline-block
              padding: 10px
              margin-right: 15px
              text-align: center
              font-size: 14px
              background-color: #69f
              color: #fff
              font-weight: 400
              cursor: pointer
            .text
               select
                    min-width: 100px
                    height: 30px
                    border: 1px solid #ccc
          table
            text-align: center
            padding-left: 30px
            cursor: pointer
            border-collapse: collapse
            td, th
              border: 1px solid #ccc
              font-size: 14px
              color: #666
              height: 40px
            thead
              th
                font-weight: 600
                background-color: #F2F2F2
            tbody
              td
                span
                  display: inline-block
                  vertical-align: middle
                  margin: 0 5px
                  padding-right: 5px
                  border-right: 1px solid #999
                  color: blue
                  &:last-child
                    border-right: none
          .pagination-wrapper
            height: 60px
            line-height: 60px
            text-align: center
            .desc
              margin-left: 50px
              display: inline-block
              font-size: 14px
              span
                color: #666
                i
                  padding: 0 3px
                  font-size: 16px
                  color: #25a4bb
        .addInfo
          padding: 0 30px
          .title
            padding: 15px 0
            font-size: 16px
            span
              color: #69f
              cursor: pointer
          table
            padding-left: 30px
            cursor: pointer
            border-collapse: collapse
            tbody
              tr
                td
                  border: 1px solid #ccc
                  font-size: 14px
                  color: #666
                  height: 40px
                  padding: 0 15px
                  &:nth-of-type(odd)
                    text-align: right
                  input:not([type="radio"]):not([type="checkbox"])
                    width: 300px
                    height: 30px
                    border: 1px solid #ccc
                  select
                    width: 200px
                    height: 30px
                    border: 1px solid #ccc
                  label
                    display: inline-block
                    padding: 0 15px 0 5px
                  checkbox
                    display: inline-block
                    vertical-align: top
                &:last-child
                  td
                    text-align: center
                    span
                      padding: 5px 15px
                      font-size: 14px
                      background-color: #69f
                      color: #fff
                      border-radius: 5px
                      font-weight: 400
                      cursor: pointer
        .show-role
          padding: 0 30px
          .title
            padding: 15px 0
            font-size: 16px
            span
              color: #69f
              cursor: pointer
          .list
            margin-bottom: 15px
            span
              margin-right: 15px
</style>
